<template>
  <div>
    <!-- <pre v-html="data"></pre> -->
    <el-form
      :model="pickUpDriver"
      ref="pickUpDriver"
      :rules="newRules"
      size="mini"
    >
      <el-form-item
        v-if="isDriver == false"
        label="选择司机信息（常用）"
        label-width="200px"
        filterable
        prop="id"
      >
        <el-select
          size="mini"
          v-model="pickUpDriver.id"
          filterable
          style="width: 300px;"
        >
          <el-option
            v-for="(item, value) in pickSource"
            :key="value"
            :label="item"
            :value="value"
          >
          </el-option>
        </el-select>
        <el-link
          :underline="false"
          @click="temporaryDriver"
          type="primary"
          class="ssss"
          >新增司机信息(临时)</el-link
        >
      </el-form-item>

      <el-form-item
        v-if="isDriver == true"
        label="司机姓名"
        label-width="200px"
        prop="driverName"
      >
        <el-input
          v-model="pickUpDriver.driverName"
          autocomplete="off"
          style="width: 300px;"
          size="mini"
        ></el-input>
        <el-link :underline="false" @click="driver" type="primary" class="ssss"
          >返回选择</el-link
        >
      </el-form-item>
      <el-form-item
        v-if="isDriver == true"
        label="司机电话"
        label-width="200px"
        prop="driverPhone"
      >
        <el-input
          v-model="pickUpDriver.driverPhone"
          autocomplete="off"
          style="width: 300px;"
          size="mini"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="isDriver == true"
        label="车牌"
        label-width="200px"
        prop="licensePlate"
      >
        <el-input
          v-model="pickUpDriver.licensePlate"
          autocomplete="off"
          style="width: 300px;"
          size="mini"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="isDriver == true"
        label="服务商"
        label-width="200px"
        filterable
        prop="vehicleServiceProvider"
      >
        <el-select
          size="mini"
          v-model="pickUpDriver.vehicleServiceProvider"
          filterable
          style="width: 300px;"
        >
          <el-option
            v-for="(item, value) in serviceSource"
            :key="value"
            :label="item"
            :value="value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="isDriver == true"
        label="是否保存司机信息"
        label-width="200px"
        prop="whether"
      >
        <el-radio v-model="pickUpDriver.whether" label="1">是</el-radio>
        <el-radio v-model="pickUpDriver.whether" label="0">否</el-radio>
      </el-form-item>

      <div>
        <el-button size="mini" @click="closeDriverDrawer()">取 消</el-button>
        <el-button size="mini" type="primary" @click="saveTemporaryDriver()"
          >保 存</el-button
        >
      </div>
    </el-form>
  </div>
</template>
<script>
import { closeDialog } from "@/utils";
import { ajax } from "@/store/yg/common/utils";
import LoginVue from "../../../../yg/auth/Login.vue";
export default {
  props: ["field", "data"],
  data() {
    return {
      pickUpIds: [],
      isDriver: false,
      pickUpDriver: {
        driverName: "",
        driverPhone: "",
        licensePlate: "",
        vehicleServiceProvider: "",
        whether: "0",
        id: ""
      },

      pickSource: [],
      serviceSource: [],
      driverId: "",
      newRules: {
        id: [{ required: true, message: "请选择司机", trigger: "change" }],
        driverName: [
          { required: true, message: "请输入司机名称", trigger: "bulr" }
        ],
        driverPhone: [
          { required: true, message: "请输入司机电话", trigger: "bulr" }
        ],
        licensePlate: [
          { required: true, message: "请输入车牌", trigger: "bulr" }
        ],
        vehicleServiceProvider: [
          { required: true, message: "请选择服务商", trigger: "change" }
        ],
        whether: [
          { required: true, message: "请选择是否保存", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    this.deliveryOfGoodsSource();
  },
  destroyed() {
    console.log("11111");
  },
  methods: {
    deliveryOfGoodsSource() {
      ajax("deliveryOfGoodsSource", this.pickUpDriver).then(
        res => {
          //console.log(res.serviceSource);
          this.pickSource = res.pickSource;
          this.serviceSource = res.serviceSource;
        },
        error => {
          console.log(error);
        }
      );
    },
    _validateForm() {
      let flag = true;
      if (this.isDriver) {
        this.$refs["pickUpDriver"].validateField(
          [
            "driverName",
            "driverPhone",
            "licensePlate",
            "vehicleServiceProvider"
          ],
          valid => {
            if (valid !== "") {
              flag = false;
            }
          }
        );
      } else {
        this.$refs["pickUpDriver"].validateField(["id"], valid => {
          if (valid !== "") {
            flag = false;
          }
        });
      }
      if (this.isExpressNumber) {
        this.$refs["pickUpDriver"].validateField(["expressNumber"], valid => {
          if (valid !== "") {
            flag = false;
          }
        });
      }
      return flag;
    },
    closeDriverDrawer() {
      closeDialog();
      this.pickUpDriver = {
        driverName: "",
        driverPhone: "",
        licensePlate: "",
        vehicleServiceProvider: "",
        whether: "1",
        id: ""
      };
    },

    temporaryDriver() {
      //展示临时司机
      this.isDriver = true;
      this.$refs["pickUpDriver"].resetFields();
    },
    saveTemporaryDriver() {
      //保存临时司机
      if (this._validateForm()) {
        let row = this.$store.state.edit.row;
        if (this.isDriver) {
          //保存临时司机
          row.whether = this.pickUpDriver.whether;
        } else {
          row.whether = 0;
        }
        row.ids = this.$store.state.edit.ids;
        row.pickUpDriver = this.pickUpDriver;

        ajax("pickUpDriverUpdate", row).then(
          res => {
            //console.log(res);
            if (res.code != 200) {
              this.$message.error("保存失败");
            } else {
              this.$message.success("保存成功");
              this.closeDriverDrawer();
              location.reload();
            }
          },
          error => {
            console.log(error);
          }
        );
      }
    },
    driver() {
      //显示录入司机
      this.isDriver = false;
      this.$refs["pickUpDriver"].resetFields();
    }
  }
};
</script>
<style scoped></style>

<style lang="scss">
.row-item {
  color: #3f4652;
  line-height: 28px;
  margin-bottom: 14px;
}

.maxheight {
  display: none;
}
</style>
